<template>
  <div class="bank">
    <div class="bank_top">
      <div class="bank_inline">
        <span class="bank_search"
          ><el-input v-model="input" placeholder="搜索人员"></el-input
        ></span>
      </div>

      <div class="bank_selet" v-show="this.multipleSelection.length != 0">
        <span>
          <el-select
            v-model="value"
            :placeholder="cipplaceholder"
            @change="del"
          >
            <el-option key="删除" label="删除" value="删除">
            </el-option> </el-select
        ></span>
      </div>
    </div>
    <div class="bank_cent">
      <el-table
        :data="examHumanData"
        style="width: 100%"
        ref="multipleTables"
        :header-cell-style="{ background: '#F0F0F0' }"
      >
        <el-table-column
          type="index"
          width="50"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column align="center" prop="nickName" label="姓名">
        </el-table-column>

        <el-table-column align="center" prop="maxScore" label="最高分数">
          <template slot-scope="scope">
            {{ scope.row.maxScore == null ? 0 : scope.row.maxScore }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="nickName" label="是否通过">
          <template slot-scope="scope">
            {{ scope.row.passed ? "通过" : "未通过" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="tryCount" label="考试次数">
          <template slot-scope="scope">
            {{ scope.row.tryCount == null ? 0 : scope.row.tryCount }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="address" label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              icon="el-icon-s-promotion"
              type="primary"
              @click="humanExam(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
        width="70%"
      :before-close="handleClose"
      :title="'考试明细'"
      
    >
      <div style="max-height:60vh; overflow-y: auto;">
        <el-card v-for="item in dialogData" :key="item.id">
        <el-descriptions
        direction="horizontal"
        :column="2"
      >
        <el-descriptions-item label="考试人员">{{item.nickName}}</el-descriptions-item>  
        <el-descriptions-item label="考试时间">{{item.limitTime}}</el-descriptions-item>
        <el-descriptions-item label="考试用时">{{item.memberTime}}分钟</el-descriptions-item>
        <el-descriptions-item label="考试得分">{{item.memberScore}}</el-descriptions-item
        >
        <el-descriptions-item label="是否合格">
          <el-tag size="success" v-if="(item.memberScore >= item.qualifyScore)">合格</el-tag>
          <el-tag size="danger" v-else>不合格</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="考试状态">{{item.state == 0?'考试中':'已完成'}}</el-descriptions-item>
      </el-descriptions>
      </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { examPaperGetList } from "@/api/bank";

export default {
  data() {
    return {
      input: "",
      currentPage: 1,
      dialogVisible: false,
      ruleForm: {
        name: "",
        remarks: "",
      },
      rules: {
        name: [
          { required: true, message: "题库名称不能为空", trigger: "blur" },
        ],
      },
      examHumanData: [],
      dialogData: [],
      multipleSelection: [],
      value: "",
    };
  },
  computed: {
    cipplaceholder() {
      return this.multipleSelection.length
        ? `已选${this.multipleSelection.length}项`
        : "111";
    },
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      this.examHumanData = this.$store.state.examHumanData;
      console.log(this.examHumanData);
    },
    del(e) {
      this.value = "";
      this.$confirm("确实要删除吗??", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    examDetail(data) {
      console.log(data);
      this.dialogData = data;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      console.log(22);
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    async humanExam(data) {
      const res = await examPaperGetList({
        memberId: data.memberId,
        examId: data.examId,
      });
      console.log(res);

      this.dialogData = res.data.list;
      this.dialogVisible = true;
    },
    handleCurrentChange() {
      console.log(1);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.bank {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 10px 10px;
  .bank_top {
    width: 100%;
    .bank_inline {
      width: 100%;
      .bank_search {
        width: 200px;
        display: inline-block;
        margin-bottom: 10px;
      }
    }
  }
  .bank_selet {
    span {
      width: 130px;
      display: inline-block;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }
  .bank_cent {
    width: 100%;
    margin-top: 10px;
    .pagina {
      margin-top: 50px;
    }
  }
}
.listTitle {
  text-align: left;
  font-weight: 700;
  color: #999;
}
::v-deep .el-descriptions-item__container{
    line-height: 32px;
}
</style>
